<template>
	<view>

		<view class="card" v-for="(item,index) in devices" :key="index">
			<text class="content-text">
				<li>设备名称:{{devices[index].deviceName}}</li>
				<li>设备激活时间:{{devices[index].activeTime}}</li>
				<li>设备安装位置:{{devices[index].deviceAddress}}</li>
			</text>
			<button v-show="disable" @click="devicedelete(index)">删除</button>
		</view>
		<view @click="addDevice" class="add">
			<img style="width: 20%;margin-left: 40%;margin-top: 4%;" src="../.././static/add.png" alt="">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				devices: [],
				disable: false
			}
		},
		onNavigationBarButtonTap() {
			this.disable = !this.disable
		},
		mounted() {
			uni.request({
				url: 'http://192.168.100.75:9090/sl-device/query/1', // 请求的URL  /sl-user/getContact
				method: 'GET', // 请求方法，例如 GET, POST  
				headers: {
					'Content-Type': 'application/json',
					'Access-Control-Allow-Origin': '*' //允许所有域访问
				},
				data: {

				}, // 请求参数 
				success: (res) => { // 使用箭头函数以保持正确的 this 上下文
					this.devices = res.data.data; // 此处的 this 将指向组件实例
					this.addednum = res.data.data.length;
					for (let i = 0; i < this.devices.length; i++) {
						if (this.devices[i].faultCode == 0)
							this.runningnum++;
						this.warningnum = this.addednum - this.runningnum
					}

				},
				fail: (error) => { // 同样使用箭头函数
					console.error(error);
				}
			});
		},
		methods: {
			addDevice() {
				uni.navigateTo({
					url: '/pages/list/adddevice'
				})
			},
			devicedelete(index) {
				const deviceName = this.devices[index].deviceName
				uni.request({
					url: 'http://192.168.100.75:9090/sl-device/delete/',
					header: {
						'Access-Control-Allow-Origin': '*'
					},
					data: {
						deviceName: deviceName
					},
					method: 'GET',
					success: (res) => {
						uni.showToast({
							title: '删除成功'
						});
					},
					fail: (error) => {
						console.error(error);
					}
				})
				console.log(this.devices[index])
				this.devices.splice(index, 1);
			}

		}

	}
</script>

<style>
	.card {
		height: 260rpx;
		background-color: aquamarine;
		width: 90%;
		margin: 5%;
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		background-image: linear-gradient(to top, #e7f0fd 0%, #accbee 100%);
	}

	.actions {
		position: absolute;
		top: 0;
		right: 0;
	}

	.add {
		width: 60%;
		height: 120rpx;
		background-color: #7bbfea;
		border-radius: 50rpx;
		margin-left: 20%;
		box-shadow: 5rpx 10rpx 5rpx #E3F2FD;
	}

	button {
		width: 20%;
		margin-left: 40%;
		position: absolute;
		bottom: 0;
		background-color: red;
		color: #E3F2FD;
		border-radius: 30%;
	}
</style>